<template>
  <px-drawer v-model="visible" :close-on-click-modal="false" :title="title" width="600px" destroy-on-close append-to-body @close="closeDrawer">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-width="100px">
      <px-form-item label="抄表组名称" prop="groupName">
        <px-input v-model="formValue.groupName" placeholder="请输入抄表组名称" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="抄表组Code" prop="groupCode">
        <!-- :disabled="drawerType=='edit'" -->
        <px-input v-model="formValue.groupCode" placeholder="请输入抄表组Code" maxlength="100" clearable />
      </px-form-item>
      <EquipClassSelect :isRequired="true" :className="formValue.className" @changeClassName="changeClassName" />
      <EquipSystemTree
        :isRequired="true"
        :className="formValue.className"
        :systemCode="formValue.systemCode"
        :currentType="props.drawerType"
        @changeAllSystemCodes="changeAllSystemCodes"
        @changeSystemCodes="changeSystemCodes"
        @clearSystem="clearSystem"
      />
    </px-form>
    <template #footer>
      <div class="dialog-footer">
        <px-button type="primary" @click="handleSubmit(formRef)">确 定</px-button>
        <px-button @click="closeDrawer">取 消</px-button>
      </div>
    </template>
  </px-drawer>
</template>
<script setup lang="ts">
import { addAmrList, updateAmrList } from "@/api/system/amr";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs, watch } from "vue";

const props = defineProps({
  // 控制弹窗显示隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 弹窗类型 view 查看 add 新增 edit 编辑
  drawerType: {
    type: String,
    default: "add"
  },
  // 表单数据
  detailData: {
    type: Object,
    default() {
      return {};
    }
  }
});
const visible = computed(() => props.visible);
const title = computed(() => {
  const { drawerType } = props;
  if (drawerType === "add") {
    return "新增抄表组";
  } else if (drawerType === "edit") {
    return "编辑抄表组";
  } else {
    return "抄表组详情";
  }
});

// 调用父级-关闭抽屉、查询列表方法
const emits = defineEmits(["closeDrawer", "queryTable"]);

const formRef = ref();

const data = reactive<Record<string, any>>({
  formValue: {
    className: ""
  },
  rules: {
    groupName: [{ required: true, message: "抄表组名称不能为空", trigger: "blur" }],
    groupCode: [{ required: true, message: "抄表组Code不能为空", trigger: "blur" }]
  }
});

const { formValue, rules } = toRefs(data);

watch(
  () => props.visible,
  async (newVal, oldVal) => {
    if (newVal) {
      if (props.drawerType !== "add") {
        formValue.value = JSON.parse(JSON.stringify(props.detailData));
      }
    }
  }
);

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = (val, isOnlyClass) => {
  formValue.value.className = val;
  if (!isOnlyClass) {
    formRef.value?.resetFields(["systemCode"]);
    formValue.value.systemCode = "";
  }
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  formValue.value.className = val2;
  formValue.value.systemCode = val3;
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  formValue.value.systemCode = val;
};
// 系统组件值改变触发
const clearSystem = val => {
  formRef.value?.resetFields(["systemCode"]);
};

// 关闭抽屉
const closeDrawer = () => {
  formValue.value = {};
  formRef.value.resetFields();
  emits("closeDrawer");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params = formValue.value;
      if (props.drawerType === "add") {
        await addAmrList(params);
        PxMessage.success("新增成功");
        closeDrawer();
        emits("queryTable");
      } else if (props.drawerType === "edit") {
        await updateAmrList(params);
        PxMessage.success("编辑成功");
        closeDrawer();
        emits("queryTable");
      }
    }
  });
};
</script>
